<template>
  <div>
    <h1 style="margin-top: 10px">用户管理中心</h1>
    <el-container>
      <el-main>
        <div id="table">
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            :data="UserPagedata"
            stripe
            border
            height="700"
            style="width: 100%;height: 100% ;">
            <el-table-column
              prop="userid"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="username"
              label="账号"
              width="180">
            </el-table-column>
            <el-table-column
              label="账号类型"
              width="180">
              <template slot-scope="scope">
                  {{scope.row.status === 1?"管理员":"操作员"}}
              </template>
            </el-table-column>
            <el-table-column
              prop="phone"
              label="手机号"
              width="340">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="300">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="changeF( scope.row )">修改信息</el-button>
                <el-button type="text" size="small" @click="del( scope.row )">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            background
            @current-change="pageChange"
            :current-page.sync="currentPage"
            :total='dataNum'>
          </el-pagination>
        </div>
      </el-main>
      <el-footer>
        <el-col :span="4" :offset="20"><el-button type="primary" @click="ifadd=true">新建用户</el-button></el-col>
      </el-footer>
    </el-container>

    <el-dialog title="新增用户信息" :visible.sync="ifadd">
      <el-form :model="addForm" ref="addForm">
        <el-form-item label="账号" :rules="{required: true, message: '请输入账号', trigger: 'blur'}" prop="username">
          <el-input v-model="addForm.username"  placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" :rules="{required: true, message: '请输入密码', trigger: 'blur'}" prop="password">
          <el-input v-model="addForm.password"  placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input 
            v-model="addForm.phone"  
            placeholder="请输入手机号" 
            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
            @blur="addPhoneChange"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <template>
            <el-radio v-model="addForm.status" label='1'>管理员</el-radio>
            <el-radio v-model="addForm.status" label='2'>操作员</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifchange = false">取 消</el-button>
        <el-button type="primary" @click="createUser">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改用户信息" :visible.sync="ifchange">
      <el-form :model="changeForm" ref="changeForm">
        <el-form-item label="密码" :rules="{required: true, message: '请输入密码', trigger: 'blur'}" prop="password">
          <el-input v-model="changeForm.password"  placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input 
            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
            @blur="changePhoneChange"
            v-model="changeForm.phone"  
            placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="changeForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ifchange = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
    export default {
      name: "users",
      inject:['reload'],
      data(){
        return {
          loading: true,
          Userdata: [],
          UserPagedata: [],
          dataNum:0,
          currentPage:1,
          ifchange: false,
          ifadd: false,
          addForm:{
            username:'',
            password:'',
            status:'1',
            phone:'',
            remarks:'',
          },
          changeForm:{
            username:'',
            password:'',
            phone:'',
            remarks:'',
          }
        }
      },
      created(){
        this.xuanran()
      },
      methods:{
        addPhoneChange(e){
          this.addForm.linkPhone = e.target.value
        },
        changePhoneChange(e){
          this.addForm.linkPhone = e.target.value
        },
        pageChange(val){
          this.loading=true;
          let pageNo=this.currentPage
          this.UserPagedata=[]
          for(let i=(pageNo-1)*10;i<(pageNo*10>this.dataNum?this.dataNum:pageNo*10);i++){
            this.UserPagedata.push(this.Userdata[i])
          }
          setTimeout(()=>{
            this.loading=false
          },400);
        },
        xuanran(){
          this.$http.get("/hnhyscms_ws/users/getAllUsers",{emulateJSON:true}).then(
            success=>{
              this.Userdata=success.data
              this.dataNum=success.data.length
              this.pageChange()
            }
          )
        },
        createUser(){
            this.$refs['addForm'].validate((valid) => {
            if (valid) {
              let params={
                ...this.addForm,
              }
              this.$http.post("/hnhyscms_ws/users/addUser",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  this.ifadd=false
                  this.reload();
                }
              )
            }
          })
        },
        changeF(item){
          this.changeForm={
            username:item.username,
            password:item.password,
            phone:item.phone,
            remarks:item.remarks,
          }
          this.ifchange=true
        },
        change(){
          this.$refs['changeForm'].validate((valid) => {
            if (valid) {
              let params={
                ...this.changeForm,
              }
              this.$http.post("/hnhyscms_ws/users/change",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.ifchange=false
                  this.reload();
                }
              )
            }
          })
        },
        del(item){
          let host=localStorage.getItem("username")
          if(item.username===host){
              this.$message.error('不能操作当前登录账号');
          }
          else if(item.username==="hnhy"){
              this.$message.error('不能删除系统默认账号');
          }
          else{
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                let params={
                username:item.username
                }
                this.$http.post("/hnhyscms_ws/users/delete",params,{emulateJSON:true}).then(
                success=>{
                    this.reload();
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                }
                )
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
          }
        },
        instoButton(item) {
          this.ifIn = true;
          this.instoForm.productNo=item.productNo
        },
        insto() {
          this.$refs['instoForm'].validate((valid) => {
            if (valid) {
              let params={
                "productNo":this.instoForm.productNo,
                "amount":this.instoForm.amount,
                "thirdOrderNo":this.instoForm.thirdOrderNo
              }
              this.$http.post("/hnhyscms_ws/spinsto/addSpinsto",params,{emulateJSON:true}).then(
                success=>{
                  this.$message({
                    message: '入库成功',
                    type: 'success'
                  });
                  this.ifIn = false;
                  this.reload();
                }
              )
            }
            })
        },
        outstoButton(item) {
          this.ifOut = true;
          this.outstoForm.productNo=item.productNo
        },
        outsto() {
          this.$refs['outstoForm'].validate((valid) => {
            if (valid) {
              let params={
                "productNo":this.outstoForm.productNo,
                "amount":this.outstoForm.amount,
                "thirdOrderNo":this.outstoForm.thirdOrderNo
              }
              this.$http.post("/hnhyscms_ws/spoutsto/addSpoutsto",params,{emulateJSON:true}).then(
                success=>{
                  if(success.data=="0")
                  {
                    this.$message({
                      message: '出库成功',
                      type: 'success'
                    });
                    this.ifIn = false;
                    this.reload();
                  }
                  else if(success.data=="1")
                  {
                    this.$message({
                      message: '出库失败（原因：库存不足）',
                      type: 'warning'
                    });
                  }
                }
              )
              this.ifOut = false;
            }
          })
          
        },

      }
    }
</script>

<style scoped>

</style>
